<template>
	<div class="app-container calendar-list-container">
		<div class="filter-container">
			<el-input placeholder="请输入内容" v-model="listQuery.seqName" style="width: 300px;">
				<template slot="prepend">序列名称：</template>
			</el-input>
			<el-date-picker v-model="listQuery.startTime" @change="formatStartTime" style="width: 300px;margin-left: 35px;" type="date" placeholder="申请开始时间：">
			</el-date-picker>
			<el-date-picker v-model="listQuery.endTime" @change="formatEndTime" style="width: 300px;margin-left: 35px;" type="date" placeholder="申请结束时间：">
			</el-date-picker>
			<el-select v-model="listQuery.checkStatus" placeholder="审核状态：" style="width: 300px;margin-left: 30px;">
				<el-option v-for="(value,key) in applyStatus" :key="key" :label="value" :value="key">
				</el-option>
			</el-select>
		<el-button type="primary" icon="search" style="margin-left: 50px;" @click="findSeqApply()">查询</el-button>
		<el-button type="primary" icon="plus" @click="addSequence()">新增</el-button>
		</div>

		<el-table :data="list" v-loading="listLoading" element-loading-text="别着急，喝杯咖啡。。。" stripe border style="width: 100%;">
			<el-table-column prop="date" align="center" label="序列名称">
				<template scope="scope">
					<a class="aColor">{{scope.row.seqName}}</a>
				</template>
			</el-table-column>
			<el-table-column prop="name" align="center" label="租户标识">
				<template scope="scope">
					<span>{{scope.row.bankkey}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="序列业务场景">
				<template scope="scope">
					<span>{{scope.row.seqBusiScene}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="序列初始值">
				<template scope="scope">
					<span>{{scope.row.seqOriginalValue}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="步长">
				<template scope="scope">
					<span>{{scope.row.seqStepLength}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="序列最大值">
				<template scope="scope">
					<span>{{scope.row.seqMaxValue}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="字符长度">
				<template scope="scope">
					<span>{{scope.row.charLength}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="前缀">
				<template scope="scope">
					<span>{{scope.row.prefix}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="日期格式">
				<template scope="scope">
					<span>{{scope.row.appendDateFormat}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="是否连续">
				<template scope="scope">
					<span>{{continues[scope.row.seqSerial]}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="所属系统">
				<template scope="scope">
					<span>{{sysSeqHolder[scope.row.seqHolderSys]}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="审核状态">
				<template scope="scope">
					<span>{{applyStatus[scope.row.checkStatus]}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="查看审核信息" width="120">
				<template scope="scope">
					<a class="aColor" @click="checkStatus(scope.row)">查看审核信息</a>
				</template>
			</el-table-column>
			<el-table-column prop="address" align="center" label="操作" width="160">
				<template scope="scope">
					<el-button type="text" @click="updateSequence(scope.row)">修改</el-button>
					<el-button type="text" style="margin-left: 0;" @click="deleteSeqApply(scope.row)" :disabled="scope.row.checkStatus == 2">删除</el-button>
					<el-button type="text" style="margin-left: 0;" @click="updateSequenceApply(scope.row)">提交申请</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div v-show="!listLoading" class="pagination-container">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						   :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
						   layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<el-dialog title="全局序列申请新增" :visible.sync="sequenceApply">
			<el-form class="small-space" inline="inline" :model="addQuery" ref="addQuery" :rules="rules" label-position="right" label-width="150px">
				<div>基本信息</div>
				<el-form-item label="租户标识：" prop="bankkey">
					<el-input v-model="addQuery.bankkey" :disabled="true" name="bankkey"></el-input>
				</el-form-item>
				<el-form-item label="申请人：" prop="seqApplyPerson">
					<el-input v-model="addQuery.seqApplyPerson" name="seqApplyPerson"></el-input>
				</el-form-item>
				<el-form-item label="申请时间：" prop="seqCreateTime">
					<el-date-picker name="seqCreateTime" ref="seqCreateTime" v-model="addQuery.seqCreateTime" @change="formatSeqCreateTime" type="date" placeholder="申请时间：">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="序列业务场景：" prop="seqBusiScene">
					<el-input type="textarea" :rows="2" v-model="addQuery.seqBusiScene" name="seqBusiScene">
					</el-input>
				</el-form-item>
				<div>序列信息</div>
				<el-form-item label="序列名称：" prop="seqName">
					<el-input v-model="addQuery.seqName" name="seqName"></el-input>
				</el-form-item>
				<el-form-item label="序列初始值：" prop="seqOriginalValue">
					<el-input v-model="addQuery.seqOriginalValue" name="seqOriginalValue"></el-input>
				</el-form-item>
				<el-form-item label="字符长度：">
					<el-input v-model="addQuery.charLength" isRequired></el-input>
				</el-form-item>
				<el-form-item label="前缀：">
					<el-input v-model="addQuery.prefix"></el-input>
				</el-form-item>
				<el-form-item label="日期格式：">
					<el-input v-model="addQuery.appendDateFormat"></el-input>
				</el-form-item>
				<el-form-item label="步长：" prop="seqStepLength">
					<el-input v-model="addQuery.seqStepLength" name="seqStepLength"></el-input>
				</el-form-item>
				<el-form-item label="序列最大值：" prop="seqMaxValue">
					<el-input v-model="addQuery.seqMaxValue" name="seqMaxValue"></el-input>
				</el-form-item>
				<el-form-item label="是否连续标志：">
					<el-select v-model="addQuery.seqSerial" placeholder="请选择">
						<el-option v-for="(value,key) in continues" :key="key" :label="value" :value="key">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否循环：">
					<el-select v-model="addQuery.seqCycle" placeholder="请选择">
						<el-option v-for="item in loop" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属系统：" prop="seqHolderSys">
					<el-select v-model="addQuery.seqHolderSys" placeholder="请选择" name="seqHolderSys">
						<el-option v-for="(value,key) in sysSeqHolder" :key="key" :label="value" :value="key">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="sequenceApply = false">取 消</el-button>
				<el-button type="primary" @click="sequenceApplyAdd()">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="全局序列申请修改" :visible.sync="sequenceApplyUpd">
			<el-form class="small-space" inline="inline" :model="addQuery" label-position="right" label-width="150px" >
				<div>基本信息</div>
				<el-form-item label="租户标识：">
					<el-input v-model="addQuery.bankkey" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="申请人：">
					<el-input v-model="addQuery.seqApplyPerson"></el-input>
				</el-form-item>
				<el-form-item label="申请时间：">
					<el-date-picker v-model="addQuery.seqCreateTime" @change="formatSeqCreateTime" type="date" placeholder="申请时间：">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="序列业务场景：">
					<el-input type="textarea" :rows="2" placeholder="" v-model="addQuery.seqBusiScene">
					</el-input>
				</el-form-item>
				<div>序列信息</div>
				<el-form-item label="序列名称：">
					<el-input v-model="addQuery.seqName"></el-input>
				</el-form-item>
				<el-form-item label="序列初始值：">
					<el-input v-model="addQuery.seqOriginalValue"></el-input>
				</el-form-item>
				<el-form-item label="字符长度：">
					<el-input v-model="addQuery.charLength"></el-input>
				</el-form-item>
				<el-form-item label="前缀：">
					<el-input v-model="addQuery.prefix"></el-input>
				</el-form-item>
				<el-form-item label="日期格式：">
					<el-input v-model="addQuery.appendDateFormat"></el-input>
				</el-form-item>
				<el-form-item label="步长：">
					<el-input v-model="addQuery.seqStepLength"></el-input>
				</el-form-item>
				<el-form-item label="序列最大值：">
					<el-input v-model="addQuery.seqMaxValue"></el-input>
				</el-form-item>
				<el-form-item label="是否连续标志：">
					<el-select v-model="addQuery.seqSerial" placeholder="请选择">
						<el-option v-for="item in continues" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否循环：">
					<el-select v-model="addQuery.seqCycle" placeholder="请选择">
						<el-option v-for="item in loop" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属系统：">
					<el-select v-model="addQuery.seqHolderSys" placeholder="请选择">
						<el-option v-for="(value,key) in sysSeqHolder" :key="key" :label="value" :value="key">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="sequenceApplyUpd = false">取 消</el-button>
				<el-button type="primary" @click="sequenceApplyUpdate()">确 定</el-button>
			</div>
		</el-dialog>


		<el-dialog title="序列申请审批" size="tiny" :visible.sync="sequenceApplyCheck">
			<div>审核信息</div>
			<el-form class="small-space" :model="addQuery" label-position="right" label-width="150px" style="margin-left: 130px;">
				<el-form-item label="平台组审核：">
					<el-input v-model="addQuery.seqDapVerifier" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="平台组审核日期：">
					<el-date-picker v-model="addQuery.seqDapVerifyTime" type="date" placeholder="请选择：" :disabled="true">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="PMO审核：">
					<el-input v-model="addQuery.seqPomVerifier" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="PMO审核日期：">
					<el-date-picker v-model="addQuery.seqPomVerifyTime" type="date" placeholder="请选择：" :disabled="true">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer"  class="dialog-footer">
				<el-button @click="dialogFormVisible = false" >关闭</el-button>
			</div>
		</el-dialog>

	</div>
</template>
<script>
	import { findSeqApply, sequenceApplyAdd, deleteSeqApply, sequenceApplyUpdate } from '@/api/sequence/sequence'
	export default {
		name: 'appManage',
		data() {
			return {
				sequenceApplyUpd: false,
				sequenceApplyCheck: false,
				inline: true,
				state: '',
				message: '',
				value: null,
				list: null,
				total: null,
				applyTime: null,
				sequenceApply: false,
				listLoading: true,
				listQuery: {
					start: 1,
					limit: 20,
					seqName: null,
					startTime: null,
					endTime: null,
					checkStatus: null
				},
				addQuery: {
					bankkey: 'zjrcu',
					seqApplySys: null,
					seqApplyPerson: null,
					seqCreateTime: new Date(),
					seqBusiScene: null,
					seqName: null,
					seqOriginalValue: null,
					seqMaxValue: null,
					seqStepLength: null,
					seqCycle: null,
					charLength: null,
					prefix: null,
					appendDateFormat: null,
					seqSerial: null,
					seqHolderSys: null,
					checkStatus: null,
					seqDapVerifier: null,
					seqDapVerifyTime: null,
					seqPomVerifier: null,
					seqPomVerifyTime: null
				},
				temp: {
					name: '',
					description: '',
					email: ''
				},
				dialogFormVisible: false,
				tableKey: 0,
				options: [],
				continues: {
					'0': '否',
					'1': '是'
				},
				sysSeqHolder: {
					'BCS': '计费中心系统',
					'BMS': '统一后管系统',
					'CAP': '客户认证系统',
					'CCL': '客户合约系统',
					'CCS': '卡券管理系统',
					'CIF': '客户信息系统',
					'CIS': '客户交互系统',
					'CMP': '数字营销平台',
					'CMS': '客户管理系统',
					'CRS': '客户权益系统',
					'DAP': '分布式基础平台',
					'DCS': '数字证书管理系统',
					'DFM': '数据文件管理系统',
					'DIP': '数字影像平台',
					'DMP': '分布式监控平台',
					'FRP': '人脸识别平台',
					'IIF': '网络金融综合前置系统',
					'IPP': '互联网支付系统',
					'LCS': '额度中心系统',
					'MFS': '移动前台系统',
					'MMP': '消息管理平台',
					'NAS': '电子账户系统',
					'OIP': '开放互联网平台',
					'PSS': '产品销售系统',
					'RMS': '风险监控系统',
					'RPS': '红包管理系统',
					'SRP': '语音识别系统'
				},
				applyStatus: {
					'0': '新增',
					'1': '申请生效',
					'2': '生效通过',
					'3': '生效不通过',
					'4': '失效'
				},
				loop: [{
					value: 'Y',
					label: '是'
				}, {
					value: 'N',
					label: '否'
				}],
				rules: {
					bankkey: [{
						required: true, trigger: 'blur', message: '租户标识不能为空'
					}],
					seqApplyPerson: [{
						required: true, trigger: 'blur', message: '申请人不能为空'
					}],
					seqCreateTime: [{
						required: true, trigger: 'change', message: '申请时间不能为空'
					}],
					seqBusiScene: [{
						required: true, trigger: 'blur', message: '序列业务场景不能为空'
					}],
					seqName: [{
						required: true, trigger: 'blur', message: '序列名称不能为空'
					}],
					seqOriginalValue: [{
						required: true, trigger: 'blur', message: '序列初始值不能为空'
					}],
					seqStepLength: [{
						required: true, trigger: 'blur', message: '步长不能为空'
					}],
					seqMaxValue: [{
						required: true, trigger: 'blur', message: '序列最大值不能为空'
					}],
					seqHolderSys: [{
						required: true, trigger: 'change', message: '所属系统不能为空'
					}]
				}
			}
		},
		created() {
			this.findSeqApply()
		},
		methods: {
			findSeqApply() {
				findSeqApply(this.listQuery).then(response => {
					this.list = response.data.root
					this.total = response.data.total
					this.listLoading = false
				})
			},
			sequenceApplyAdd() {
				this.$refs.addQuery.validate(valid => {
					if (valid) {
						this.$refs.seqCreateTime.$emit('change')
						sequenceApplyAdd(this.addQuery).then(response => {
							const h = this.$createElement
							this.state = response.data.state
							this.message = response.data.message
							this.findSeqApply()
							this.$notify({
								title: '提示',
								type: 'success',
								message: h('i', { style: 'color: teal' }, '添加成功')
							})
							this.sequenceApply = false
						})
					}
				})
			},
			sequenceApplyUpdate() {
				this.addQuery.checkStatus = null
				sequenceApplyUpdate(this.addQuery).then(response => {
					const h = this.$createElement
					this.findSeqApply()
					this.$notify({
						title: '提示',
						type: 'success',
						message: h('i', { style: 'color: teal' }, '修改成功')
					})
					this.sequenceApplyUpd = false
				})
			},
			updateSequenceApply(row) {
				this.addQuery = Object.assign({}, row)
				this.addQuery.checkStatus = 1
				sequenceApplyUpdate(this.addQuery).then(response => {
					const h = this.$createElement
					this.findSeqApply()
					this.$notify({
						title: '提示',
						type: 'success',
						message: h('i', { style: 'color: teal' }, '申请成功')
					})
					this.sequenceApplyUpd = false
				})
			},
			updateSequence(row) {
				this.addQuery = Object.assign({}, row)
				this.sequenceApplyUpd = true
			},
			checkStatus(row) {
				this.addQuery = Object.assign({}, row)
				this.sequenceApplyCheck = true
			},
			deleteSeqApply(row) {
				this.addQuery = Object.assign({}, row)
				deleteSeqApply(this.addQuery).then(response => {
					const h = this.$createElement
					this.findSeqApply()
					this.$notify({
						title: '提示',
						type: 'success',
						message: h('i', { style: 'color: teal' }, '删除成功')
					})
				})
			},
			addSequence() {
				this.addQuery = Object.assign({}, this.$options.data().addQuery)
				this.sequenceApply = true
				this.$refs.addQuery.resetFields()
			},
			handleSizeChange(val) {
				this.listQuery.limit = val
				this.findSeqApply()
			},
			handleCurrentChange(val) {
				this.listQuery.page = val
				this.findSeqApply()
			},
			formatEndTime(val) {
				this.listQuery.endTime = val
			},
			formatStartTime(val) {
				this.listQuery.startTime = val
			},
			formatSeqCreateTime(val) {
				this.addQuery.seqCreateTime = val
			}
		}
	}

</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	.el-form{
		width: 800px;
		margin-left:70px;
		.el-form-item__content {
			margin-left: 0;
			.el-input,.el-select,.el-textarea{
				margin-left:10px;
				width: 185px
			}
		}
	}
</style>
